<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="需求标签">
      </el-table-column>
      <el-table-column
        label="解决员工">
        <template slot-scope="scope">
          <el-select v-model="scope.row.user_id" placeholder="请选择" @change="associationUser($event,scope.row)">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.username"
              :value="item.id">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { demandAssociation,associationUser } from "@/api/configApi";
import { mapGetters } from "vuex";
import { VUE_APP_BASE_API } from "@/config.js";
import patent from "./components/patent";
import company from "./components/company";
export default {
  components: {
  },
  computed: {
    ...mapGetters(["type"]),
  },
  props: {
    options: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tableData: [],
      count: 0,
      page: 1,
        region_id: this.$store.state.user.region_id,
      limit: 10,
    };
  },
  async mounted() {
   this.demandAssociation()
  },
  methods: {
    associationUser(value,data){
      associationUser({
        region_id: this.region_id,
        demand_label_id: data.id,
        user_id: value
      })
    },
    demandAssociation(){
      demandAssociation({
        region_id: this.region_id,
        page: this.page,
        limit: this.limit,
      }).then(res => {
        this.tableData = res.list
        this.count = res.count
      })
    }
  },
};
</script>

<style scoped lang="less">
.el-main {
  margin: 30px 15px;
}
::v-deep .el-input {
  width: initial;
}
</style>
